﻿@model FrogFoot.Entities.ISPProduct
@{
    ViewBag.Title = "Edit Product";
}

<h2>Edit Product</h2>

@using (Html.BeginForm("Edit", "Products", FormMethod.Post, new { @enctype = "multipart/form-data", id = "ispProductForm" }))
{
    @Html.AntiForgeryToken()
    @Html.CheckBoxFor(model => model.IsM2MFrogfootLink, new { style = "display: none;" })

    var m2mClientSelected = Model.IsM2MClient ? "" : "none";
    var is24MClientSelected = Model.Is24MClient ? "" : "none";

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(m => m.ISPProductId)
        <input value="@Model.ISPId" name="ISPId" style="display: none;" />

        @{
            if (Model != null && Model.ISPLogo != null)
            {
                <div class="form-group" id="currentImage">
                    <div class="col-sm-3">Logo</div>
                    <div class="col-sm-2">
                        <img src="~/Assets/ISPProductLogo/@Model.ISPLogo.AssetPath" alt="image" width="300" height="200" />
                    </div>
                </div>
            }
        }

        <div class="form-group">
            <div id="uploadContainer" class="col-sm-offset-3 col-xs-9">
                <input id="ImgInput" type="file" name="upload" />
            </div>
        </div>

        <div class="form-group" id="imgPreviewContainer" style="display: none;">
            <div class="col-sm-3">Logo</div>
            <div class="col-sm-4">
                <img id="imgPreview" width="300" height="200" />
            </div>
            <div class="col-sm-2">
                <input id="keepCurImg" style="margin-bottom: 30px;" type="button" class="btn btn-default" value="Revert image" />
                <div id="imgDetails"></div>
            </div>
        </div>

        <hr />
        <h3>Frogfoot Link</h3>

        <div class="form-group">
            @Html.LabelFor(model => model.LineSpeed, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EnumDropDownListFor(u => u.LineSpeed, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.LineSpeed, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.IsM2MFrogfootLink, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @{
                    var m24Selected = Model.IsM2MFrogfootLink ? "" : "checked";
                    var m2mSelected = Model.IsM2MFrogfootLink ? "checked" : "";
                }
                <div class="radio">
                    <label><input type="radio" @m24Selected name="contractTerm">24 Month Frogfoot Line</label>
                </div>
                <div class="radio">
                    <label><input type="radio" @m2mSelected class="m2m" value="true" name="contractTerm">Month to month Frogfoot Line</label>
                </div>
            </div>
        </div>

        <div id="m2mOnceOffPayment" class="form-group" style="display: @(Model.IsM2MFrogfootLink ? "" : "none")">
            @Html.LabelFor(model => model.OnceOfFFPaymentForM2M, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBoxFor(model => model.OnceOfFFPaymentForM2M, new { @class = "checkbox" })
            </div>
        </div>

        <hr />
        <h3>Broadband Product</h3>

        <div class="form-group">
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control", maxlength = "25", placeholder = "Fast Fibre 10Mbps" } })
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(model => model.Description, new { @class = "form-control", maxlength = "118", placeholder = "Description less than 118 chars" })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <!--24 Month fields-->
        <div class="form-group">
            @Html.LabelFor(model => model.Is24MClient, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBoxFor(model => model.Is24MClient, new { @class = "checkbox" })
            </div>
        </div>

        <div id="24mMonthlyCostContainer" style="display: @is24MClientSelected;">
            <div class="form-group">
                @Html.LabelFor(model => model.MonthlyCost, htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.EditorFor(model => model.MonthlyCost, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                    @Html.ValidationMessageFor(model => model.MonthlyCost, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.SetupCost, htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.EditorFor(model => model.SetupCost, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                    @Html.ValidationMessageFor(model => model.SetupCost, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <!--End 24 Month Fields-->
        <!--Monthly Fields-->
        <div class="form-group">
            @Html.LabelFor(model => model.IsM2MClient, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBoxFor(model => model.IsM2MClient, new { @class = "checkbox" })
            </div>
        </div>

        <div id="m2mMonthlyCostContainer" style="display: @m2mClientSelected;">
            <div class="form-group">
                @Html.LabelFor(model => model.M2MMonthlyCost, htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.EditorFor(model => model.M2MMonthlyCost, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                    @Html.ValidationMessageFor(model => model.M2MMonthlyCost, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.M2MSetupCost, htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.EditorFor(model => model.M2MSetupCost, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                    @Html.ValidationMessageFor(model => model.M2MSetupCost, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <!--End Monthly Fields-->
        <!--Specials-->
        <div class="form-group">
            @Html.LabelFor(model => model.IsSpecial, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("IsSpecial", Model.IsSpecial ?? false)
            </div>
        </div>
        <div id="specialsContainer" class="form-group" style="display: @(Model.IsSpecial == true ? "" : "none")">
            <p>Specials now apply to your product.</p>
            <p>If this product is ordered during the <strong>"Early Bird"</strong> period then Frogfoot will <strong>waive</strong> your installation fee.</p>
            <p>If this product is ordered during the <strong>"Head-Start"</strong> period then Frogfoot will <strong>halve</strong> your installation fee.</p>
        </div>
        <!--End Specials-->

        <div class="form-group">
            @Html.LabelFor(model => model.UpSpeed, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextBoxFor(model => model.UpSpeed, new { @class = "form-control", @style = "width: 200px!important; display: inline" })
                <label style="display: inline;">Mbps</label>
                @Html.ValidationMessageFor(model => model.UpSpeed, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.IsCapped, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBoxFor(model => model.IsCapped, new { @class = "checkbox" })
            </div>
        </div>

        <div id="capAmount" class="form-group" style="display: none;">
            @Html.LabelFor(model => model.Cap, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextBoxFor(model => model.Cap, new { @class = "form-control", @style = "width: 200px!important; display: inline", @type = "number" })
                <label style="display: inline;">Gb</label>
            </div>
        </div>


        @*Attr fields*@
        <div class="form-group">
            @Html.LabelFor(model => model.Attr1, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Attr1, new { htmlAttributes = new { @class = "form-control", placeholder = "Free Wifi Router incl.", maxlength = "25" } })
                @Html.ValidationMessageFor(model => model.Attr1, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Attr2, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Attr2, new { htmlAttributes = new { @class = "form-control", placeholder = "Free Phone & Line incl.", maxlength = "25" } })
                @Html.ValidationMessageFor(model => model.Attr2, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Attr3, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Attr3, new { htmlAttributes = new { @class = "form-control", placeholder = "R3.50/GB Top Up", maxlength = "25" } })
                @Html.ValidationMessageFor(model => model.Attr3, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Attr4, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Attr4, new { htmlAttributes = new { @class = "form-control", placeholder = "Other feature...", maxlength = "25" } })
                @Html.ValidationMessageFor(model => model.Attr4, "", new { @class = "text-danger" })
            </div>
        </div>

        @*Info Sections*@
        <h3>Info for "More Details" page</h3>
        <div class="col-md-10 col-md-offset-1">
            <label style="margin: 10px 0;">Keep info text mostly uniform in length and height. MUST include header if there is body.</label>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Info1Heading, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Info1Heading, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Info1Heading, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info1, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(model => model.Info1, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Info1, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info2Heading, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Info2Heading, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Info2Heading, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info2, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(model => model.Info2, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Info2, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info3Heading, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Info3Heading, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Info3Heading, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info3, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(model => model.Info3, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Info3, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info4Heading, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Info4Heading, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Info4Heading, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Info4, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(model => model.Info4, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Info4, "", new { @class = "text-danger" })
            </div>
        </div>

        @*Product checkbox attributes*@
        <div class="form-group">
            @Html.LabelFor(model => model.Shaped, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("Shaped", Model.Shaped ?? false)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Router, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("Router", Model.Router ?? false)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("Phone", Model.Phone ?? false)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Install, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("Install", Model.Install ?? false)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Video, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("Video", Model.Video ?? false)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.MobileData, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("MobileData", Model.MobileData ?? false)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CCTV, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.CheckBox("CCTV", Model.CCTV ?? false)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-3 col-md-9">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
                    }

@using (Html.BeginForm("Delete", "Products"))
{
    <div class="form-group">
        <input type="text" name="prodId" value="@Model.ISPProductId" style="display: none;" />
        <input type="text" name="ispId" value="@Model.ISPId" style="display: none;" />
        <input type="submit" class="btn btn-warning col-md-offset-3" value="Delete" />
    </div>
}

@section Scripts{

    <script type="text/javascript">
        $(function () {

            if ($('#IsCapped').is(':checked')) {
                $('#capAmount').show();
            } else {
                $('#capAmount').hide();
            }

            $('#IsCapped').click(function () {
                if ($(this).is(':checked')) {
                    $('#capAmount').show();
                } else {
                    $('#capAmount').hide();
                }
            });

            //stops scroll from incrementing number inputs
            $(':input[type=number]').on('mousewheel', function (e) { $(this).blur(); });

            //preview uploaded image
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    var file = input.files[0];
                    reader.readAsDataURL(file);

                    var image = new Image();

                    reader.onload = function (e) {
                        image.src = e.target.result;

                        image.onload = function () {
                            var w = this.width,
                                h = this.height,
                                s = ~~(file.size / 1024) + 'KB';
                            $('#imgDetails').html("<p>width: " + w + "</p><p>height: " + h + "</p><p>size: " + s + "</p>");

                            if (s > 2000) {
                                alert.show("file size of " + s + " is too large. <br/> Recommended size is under 300 KB");
                            }

                            $('#imgPreview').attr('src', e.target.result);
                            $('#imgPreviewContainer').show();
                            $('#currentImage').hide();
                        }
                    }
                }
            }

            $("#uploadContainer").on('change', '#ImgInput', function () {
                readURL(this);
            });

            //keep new image; discard old
            $('#keepCurImg').on('click', function () {
                $('#uploadContainer').empty();
                $('#uploadContainer').html('<input id="ImgInput" type="file" name="upload" />');
                $('#imgPreviewContainer').hide();
                $('#currentImage').show();
            });

            //show or hide the m2m price
            $('#IsM2MClient').click(function () {
                if ($(this).is(':checked')) {
                    $('#m2mMonthlyCostContainer').show();
                } else {
                    $('#m2mMonthlyCostContainer').hide();
                    $('#M2MMonthlyCost').val('');
                }
            });

            //show or hide the 24m price
            $('#Is24MClient').click(function () {
                if ($(this).is(':checked')) {
                    $('#24mMonthlyCostContainer').show();
                } else {
                    $('#24mMonthlyCostContainer').hide();
                    $('#Is24MClient').val('');
                }
            });

            //hide the OnceOffCost if the 24M FF option is selected
            $('input[name=contractTerm]').change(function () {
                if ($(this).hasClass('m2m') && $(this).is(':checked')) {
                    $('#m2mOnceOffPayment').show();
                } else {
                    $('#m2mOnceOffPayment').hide();
                }
            });

            //show or hide the specials note
            //$('#IsSpecial').click(function () {
            //    if ($(this).is(':checked')) {
            //        $('#specialsContainer').show();
            //    } else {
            //        $('#specialsContainer').hide();
            //    }
            //});

            //force either m2m or 24m to be selected
            $('#ispProductForm').submit(function () {

                $('#IsM2MFrogfootLink')[0].checked = $("input[type='radio'].m2m:checked").val() == 'true' ? true : false;

                if (!$('#IsM2MClient').is(':checked')) {
                    $('#M2MMonthlyCost').val('');
                    $('#M2MSetupCost').val('');
                } else {
                    if ($('#M2MMonthlyCost').val() == '') {
                        alert('Month to Month Monthly Cost must be specified if selected.');
                        return false;
                    }
                    if ($('#M2MSetupCost').val() == '') {
                        alert('Month to Month Setup Cost must have a price if selected.');
                        return false;
                    }
                }

                if (!$('#Is24MClient').is(':checked')) {
                    $('#MonthlyCost').val('');
                    $('#SetupCost').val('');
                } else {
                    if ($('#MonthlyCost').val() == '') {
                        alert('24 Month Monthly Cost must be specified if selected.');
                        return false;
                    }

                    if ($('#SetupCost').val() == '') {
                        alert("24 Month Setup Cost must be specified if selected.");
                        return false;
                    }
                }

                if ($('#MonthlyCost').val() == '' && $('#M2MMonthlyCost').val() == '') {
                    alert('The ISP product must be either 24 month or Month to Month options.');
                    return false;
                }
            });
        });
    </script>
}